//	联动

import React, { useCallback, useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { Switch, Select } from 'antd';
import { CHARTS_CHAIN_TYPE } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';

// import { filterObjectNullKeys } from 'src/libs/utils';


interface IProps {
	config: any;
	allConfigs: Array<any>;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const ChartsChain = ( props: IProps ) => {
	const { config, allConfigs, onValuesChange } = props;

	//	是否开启联动
	const [ isChainAvailable, setChainAvailable ] = useState( config.mutual && config.mutual.isChainAvailable === true ? true : false );

	//	是否开启手动
	const [ isManual, setManual ] = useState( config.mutual && config.mutual.isManual === true ? true : false );

	//	所有可选图表
	const allCharts = allConfigs.filter( k => CHARTS_CHAIN_TYPE.includes( k.type ) && k.key !== config.key ).map( v => {
		return {
			value: v.key,
			label: v.style.titleValue
		};
	} );

	//	已选图表id
	const [ chainValues, setChainValues ] = useState( config.mutual.chartsChainIds || [] );

	const handleChange = ( value ) => {
		setChainAvailable( value );

		let chartsChainIds = [];

		//	如果是自动
		if ( !isManual ) {
			chartsChainIds = allCharts.map( k => k.value );
		} else {
			chartsChainIds = config.mutual.chartsChainIds;
		}
		onValuesChange( config.type, config.key, {
			isChainAvailable: value,
			chartsChainIds: chartsChainIds
		}, 'mutual' );
	};

	const handleManualChange = ( value ) => {
		setManual( value );

		let obj: any = {};
		obj.isManual = value;

		//	如果是自动，就设为全部图表
		if ( !value ) {
			obj.chartsChainIds = allCharts.map( k => k.value );
		}
		onValuesChange( config.type, config.key, obj, 'mutual' );

	};

	const handleSelectChange = useCallback( ( value ) => {
		setChainValues( value );
		onValuesChange( config.type, config.key, { chartsChainIds: value }, 'mutual' );
	}, [ setChainValues, onValuesChange, config.type, config.key ] );

	//	设置默认的选项
	useEffect( () => {

		if ( !chainValues ) return;

		//	如果是手动，过滤已删除的图表
		if ( isManual ) {
			const existCharts = chainValues.filter( v => allCharts.some( t => t.value === v ) );
			if ( existCharts.toString() !== chainValues.toString() ) {
				handleSelectChange( existCharts );
			}
		} else {

			const newChartsChainIds = allCharts.map( t => t.value );
			if ( newChartsChainIds.toString() !== chainValues.toString() ) {
				handleSelectChange( newChartsChainIds );
			}
		}

	}, [ allCharts, chainValues, handleSelectChange, config.type, config.key, isManual ] );

	return (

		<div>
			<FormItem
				label="是否开启" labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<Switch checked={ isChainAvailable } onChange={ handleChange }/>
			</FormItem>

			<FormItem
				label="是否手动选择" labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<Switch checked={ isManual } onChange={ handleManualChange }/>
			</FormItem>

			{
				isChainAvailable && (
					<FormItem
						label="请选择与本图表联动的下级图表" labelAlign="left" labelCol={ { span: 24 } }
						wrapperCol={ { span: 24 } }>
						<Select
							mode="multiple" placeholder="请选择图表"
							disabled={ !isManual }
							options={ allCharts }
							value={ chainValues }
							defaultValue={ chainValues }
							onChange={ handleSelectChange }>
						</Select>
					</FormItem>
				)
			}
		</div>
	);
};


export default React.memo( ChartsChain );
